@vw_fontsize: 10;
@vw_base: 375;

@max-width:760px;

.vw(@px) {
  width: (@px / @vw_base) * 100vw;
}

@vh_base: 812;
.vh(@px) {
  height: (@px / @vh_base) * 100vh;
}


//.v (@px, @attr: width,@addpx:0) {
//  @vw: (@px / 375) * 100 + @addpx;
//    @{attr}: ~"@{vw}vw";
//}


.v2 (@px, @px2,@attr: width) {
  @vw: (@px / 375) * 100;
  @vh: (@px2 / 375) * 100;
    @{attr}: ~"@{vw}vw @{vh}vw";
}

// wap：一般用于字体，传入 px ，计算 vw
// web: 根据vw，反求px
.v (@px, @attr: font-size,@addpx:4) {
  @media screen and (max-width:@max-width) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:@max-width){
    @vw: (@px / 375) * 100;
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}


// wap：一般用于字体，传入 px ，计算 vw
// web: 根据vw，反求px
.h (@px, @attr: height,@addpx:4) {
  @media screen and (max-width:@max-width) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:@max-width){
    @vw: (@px / 375) * 100;
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}


// wap：一般用于字体，传入 px ，计算 vw
// web: 根据vw，反求px
.w (@px, @attr: width,@addpx:4) {
  @media screen and (max-width:@max-width) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:@max-width){
    @vw: (@px / 375) * 100;
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}


// wap：一般用于字体，传入 px ，计算 vw
// web: 根据vw，反求px
.pt (@px, @attr: padding-top,@addpx:4) {
  @media screen and (max-width:@max-width) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:@max-width){
    @vw: (@px / 375) * 100;
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}

// wap：一般用于字体，传入 px ，计算 vw
// web: 根据vw，反求px
.pb (@px, @attr: padding-bottom,@addpx:4) {
  @media screen and (max-width:@max-width) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:@max-width){
    @vw: (@px / 375) * 100;
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}



// wap：一般用于字体，传入 px ，计算 vw
// web: 根据vw，反求px
.pl (@px, @attr: padding-left,@addpx:4) {
  @media screen and (max-width:@max-width) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:@max-width){
    @vw: (@px / 375) * 100;
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}


// wap：一般用于字体，传入 px ，计算 vw
// web: 根据vw，反求px
.pr (@px, @attr: padding-right,@addpx:4) {
  @media screen and (max-width:@max-width) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:@max-width){
    @vw: (@px / 375) * 100;
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}






// wap：一般用于字体，传入 px ，计算 vw
// web: 根据vw，反求px
.mt (@px, @attr: margin-top,@addpx:4) {
  @media screen and (max-width:@max-width) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:@max-width){
    @vw: (@px / 375) * 100;
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}

// wap：一般用于字体，传入 px ，计算 vw
// web: 根据vw，反求px
.mb (@px, @attr: margin-bottom,@addpx:4) {
  @media screen and (max-width:@max-width) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:@max-width){
    @vw: (@px / 375) * 100;
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}



// wap：一般用于字体，传入 px ，计算 vw
// web: 根据vw，反求px
.ml (@px, @attr: margin-left,@addpx:4) {
  @media screen and (max-width:@max-width) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:@max-width){
    @vw: (@px / 375) * 100;
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}


// wap：一般用于字体，传入 px ，计算 vw
// web: 根据vw，反求px
.mr (@px, @attr: margin-right,@addpx:4) {
  @media screen and (max-width:@max-width) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:@max-width){
    @vw: (@px / 375) * 100;
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}












.mp (@px, @attr: width,@pc) {
  @media screen and (max-width:760px) and (min-width:100px){
    @vw: (@px / 375) * 100;
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:760px){
    @newpx: @pc;
      @{attr}: ~"@{newpx}px";
  }
}

// wap：一般用于字体，传入 vw ，计算 vw
// web: 根据vw，反求px
.mp2 (@vw, @attr: width,@pc:0) {
  @media screen and (max-width:760px) and (min-width:100px){
      @{attr}: ~"@{vw}vw";
  }

  @media screen and (max-width:10800px) and (min-width:760px){
    @newpx: @vw * 800 * 0.01;
      @{attr}: ~"@{newpx}px";
  }
}
